<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 100px;
        }
    </style>
</head>

<body>
    <!--app表作为根标签-->
    <div id="app">
        <!-- 插值表达式:{{}} -->
        <p>{{ str }}</p>
        <p>{{ nums }}</p>
        <!-- 错误的写法：<img src="{{}}" > -->
        <img :src="src" /><br>
        <!-- 按钮方法绑定 -->
        <button @click="click">点击</button>
        <p>{{ datas }}</p>
        <button @click="add">求和</button>
        <p>{{ sums }}</p>
        <!-- 数据双向绑定 v-model="tests" -->
        <p>{{ tests }}</p>
        <input type="text" v-model="tests">
    </div>
    <script src="./js/vue@3.js"></script>
    <script>
        const { createApp } = Vue  //创建了一个vue实例
        createApp({
            //数据的选项卡
            data() {
                const message = '我是p标签'
                const num = 123
                const imgsrc = './img/01.jpg'
                let data = 123
                let sum = 0
                let test = '施雅典'
                return {
                    str: message,
                    nums: num,
                    src: imgsrc,
                    datas: data,
                    sums: sum,
                    tests: test
                }
            },
            methods: {
                click: function () {
                    this.datas++
                },
                add: function () {
                    return this.sums = this.nums + this.datas
                }
            }
        }).mount('#app')//把vue实例挂在到app标签上
    </script>
</body>

</html>